<template>
  <div
    v-if="_.$isNotEmpty(modelValue)"
    class="pre-file-cont"
  >
    <div class="media-wrapper">
      <a-image
        v-if="type === FIELD_TYPE.IMAGE"
        :height="height"
        :src="modelValue"
        :width="width"
        fallback=""
      />
      <template v-else>
        <template v-if="type === FIELD_TYPE.AUDIO">
          <video
            ref="videoRef"
            :src="modelValue"
            height="0"
            preload
            width="0"
            @pause="stopFile(false)"
            @play="playFile(false)"
          ></video>
        </template>
        <div style="position: relative">
          <img
            :src="iconURL"
            :style="{width: isNaN(Number(width))?width:width+'px', height: isNaN(Number(height))?height:height+'px',objectFit:'cover'}"
            alt="file_icon_preview"
          />
          <div class="icons-box">
            <PauseOutlined
              v-if="playing"
              :style="{color:'rgb(255,255,255)', fontSize: '16px'}"
              @click.prevent.stop="stopFile"
            />
            <CaretRightOutlined
              v-else
              :style="{color:'rgb(255,255,255)', fontSize: '16px'}"
              @click.prevent.stop="playFile"
            />
          </div>
        </div>
      </template>
      
      <!-- 右上角菜单按钮 -->
      <a-dropdown 
        v-if="deleteAble || downloadAble" 
        :trigger="['click']"
        placement="bottomRight"
      >
        <div
          class="menu-trigger"
          @click.stop
        >
          <MoreOutlined />
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item
              v-if="deleteAble"
              @click="onDelete"
            >
              <CloseCircleOutlined />
              删除
            </a-menu-item>
            <a-menu-item
              v-if="downloadAble"
              @click="downFile"
            >
              <DownloadOutlined />
              下载
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
  <a-button
    v-else-if="uploadAble"
    :disabled="disabled"
    :type="'dashed'"
    @click="onUpload"
  >
    {{ '点击上传' + title }}
  </a-button>
  <upload-file
    ref="uploadFileModalRef"
    v-model:url="uploadUrl"
    :use-original-file-name="useOriginalFileName"
    @after-confirm="emit('update:modelValue', uploadUrl)"
  />
</template>

<script lang="ts" setup>
import { CaretRightOutlined, CloseCircleOutlined, DownloadOutlined, PauseOutlined, MoreOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'

import getImgUrl from '@/framework/assets/imgs/getImgUrl'
import { FIELD_TYPE } from '@/framework/components/common/Portal/type'
import { downloadUrl } from '@/framework/network/request'
import { getFileName } from '@/framework/utils/file'

const uploadUrl = ref('')
const _ = getInstance()
const uploadFileModalRef = ref()
const audioFile = getImgUrl('file/audio_icon.png')
const ukFile = getImgUrl('file/unknown_file.png')
const props = withDefaults(
  defineProps<{
    type?: string,
    modelValue: string | null,
    title?: string,
    disabled?: boolean,
    width?: string | number,
    height?: string | number,
    deleteAble?: boolean,
    uploadAble?: boolean,
    downloadAble?: boolean,
    useOriginalFileName?: boolean
  }>(),
  {
    type: FIELD_TYPE.IMAGE,
    title: '',
    disabled: false,
    width: 'auto',
    height: 'auto',
    deleteAble: false,
    uploadAble: false,
    downloadAble: true,
    useOriginalFileName: false
  }
)
const { modelValue, width, height, type } = toRefs(props)
const videoRef = ref()
const playing = ref(false)
const iconURL = computed(() => {
  if (props.type === FIELD_TYPE.IMAGE) {
    return props.modelValue
  } else if (props.type === FIELD_TYPE.AUDIO) {
    return audioFile
  } else {
    return ukFile
  }
})
const onUpload = () => {
  console.log('onUpload')
  uploadFileModalRef.value.showUploadDialogBox(type.value)
}
const onDelete = () => {
  emit('delete')
  emit('update:modelValue', null)
}
const playFile = (flag = true) => {
  if (flag) {
    const videos = document.getElementsByTagName('video')
    for (let i = 0; i < videos.length; i++) {
      videos[i].pause()
    }
    videoRef.value.play()
  }
  playing.value = true
}

const stopFile = (flag = true) => {
  if (flag) {
    videoRef.value.pause()
  }
  playing.value = false
}

const downFile = () => {
  console.log('downFile')
  props.modelValue && downloadUrl(props.modelValue as string, getFileName(props.modelValue as string) || 'download.file')
}
const emit = defineEmits<{
  (e: 'delete'): void
  (e: 'update:modelValue', value: string|null): void
}>()
watch(
  () => uploadUrl.value,
  () => console.log('uploadUrl', uploadUrl.value)
)
onMounted(() => {
})
</script>

<style lang="less" scoped>
.pre-file-cont {
  display: flex;
  justify-content: center;
  position: relative;

  video {
    position: absolute;
  }

  .icons-box {
    margin-left: -20px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-10%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    i {
      display: inline-block;
    }
  }
}

// 媒体容器
.media-wrapper {
  position: relative;
  display: inline-block;
  
  // 右上角菜单按钮
  .menu-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.75);
    transition: all 0.3s;
    backdrop-filter: blur(8px);
    opacity: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    &:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    &:active {
      transform: scale(0.95);
    }
    
    // 手机端增大点击区域
    @media (max-width: 768px) {
      width: 40px;
      height: 40px;
      font-size: 20px;
      opacity: 1; // 手机端始终显示
    }
  }
  
  // 鼠标悬停时显示菜单按钮
  &:hover .menu-trigger {
    opacity: 1;
  }
}
</style>